//默认参数
.zks(@width:20px,@height:10px) {
  width: @width;
  height: @height;
  // content: @arguments; //全部参数
}

p {
  .zks();
}
p {
  .zks(200px,200px);
}

// 混入时加入()以便于区分
.card(light) {
  background-color: yellow;
}

div {
  .hoverShadow();
  .card(light);
}

// 鼠标经过上移阴影动画
.hoverShadow () {
  transition: all 0.5s;
  &:hover {
    transform: scale(0.5);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  }
}

.trangile(@_,@width:20px,@color:red) {
  border-color: @color transparent transparent transparent transparent;
}

.main {
  .trangile(top);
}

// less的剩余参数

.resetTest(...) {
  box-shadow: @arguments;
}

.reset {
  .resetTest(1px,2px,10px,red);
}

// 方法的命名空间

.header() {
  .nav(@width:90%) {
    width: @width;
    .section(@h:60px) {
      height: @h;
    }
  }
  .logo(@h:60%) {
    height: @h;
  }
}
// 两中调用方式 不加括号()
#z1 {
  .header.nav;
}
#z2 {
  .header > .logo(6100px);
}

// 方法中的条件函数 if else
@some: foo;
@bol: false;
#z3 {
  margin: if((2 > 1), 0, 3px);
  color: if((iscolor(@some)), @some, black);
  // content: if(not (@bol), foo, bar); //取反
  content: if((not (@bol) and (2 > 1)), true, false); // &&
  content: if((not (@bol) and (220<1)), 10000, 454250); // ||
}

.cards() {
  // 对应的是 || ! &&
  // .sss(@width:100px,@color:red,@style:solid) when (@width>50) , (@color='#333') {
  // .sss(@width:100px,@color:red,@style:solid) when (@width>50) not (@color='#333') {
  .sss(@width:100px,@color:red,@style:solid)
    when
    (@width>50)
    and
    (@color="#333") {
    border: @width @style @color;
  }
}
#z4 {
  .cards > .sss();
}

// 属性拼接
//  _是代表空格   transform: scale(2deg) translate(200px);

// +代表空格    transform: scale(2deg), translate(200px);

.animate() {
  transform+_: scale(2deg);
}

#z5 {
  .animate();
  transform+_: translate(200px);
}
